<template>
	<input type="file" @change="onFile">
	<img :src="src" alt="">
	<img :src="src2" alt="">
	<button @click="release">操作</button>
	<button @click="getDataByBlobUrl">操作</button>
	<button @click="read">读取剪贴板</button>
	<div class="editor">剪贴板内容</div>
	<textarea id="bar">这里的内容</textarea>
	<button class="clipbtn" data-clipboard-action="copy" data-clipboard-target="#bar">剪贴</button>
</template>
<script>
import ClipboardJS from 'clipboard';
export default {
	data() {
		return {
			src: '',
			src2: ''
		}
	},
	methods: {
		read() {
			navigator.clipboard
				.readText()
				.then(
					(clipText) => (document.querySelector(".editor").innerText += clipText),
				);
		},
		getDataByBlobUrl() {

		},
		release() {
			window.URL.revokeObjectURL(this.src);
			this.src2 = this.src;
		},
		onFile(e) {
			console.log(e);
			console.log(e.target.files[0]);
			const file = e.target.files[0];
			//方法2
			this.src = window.URL.createObjectURL(file);
			//方法1
			// const reader = new FileReader();
			// reader.onload = (e) => {
			// 	this.src = e.target.result;
			// };
			// reader.readAsDataURL(file);
		},
	},
	mounted() {
		var clipboard = new ClipboardJS('.clipbtn');
		console.log(clipboard);

		clipboard.on('success', function (e) {
			console.info('Action:', e.action);
			console.info('Text:', e.text);
			console.info('Trigger:', e.trigger);

			//e.clearSelection();
		});

		clipboard.on('error', function (e) {
			console.error('Action:', e.action);
			console.error('Trigger:', e.trigger);
		});
	}
}
</script>
<style lang="scss"></style>